import './index.scss'
import checkIcon from './img/check.png'
import work from './img/work.png'
import warning from './img/warning.png'
import jichuji from './img/device.png'
import CenterOne from './centerOne'
import CenterTwo from './centerTwo'

export default ({ showText }) => {
  const statisticData = [
    {
      title: '巡检统计',
      icon: checkIcon,
      content: [
        {
          key: '巡检周期',
          value: '2',
          unit: '周',
        },
        {
          key: '累计巡检',
          value: '10',
          unit: '次',
        },
        {
          key: '距离下次巡检',
          value: '150',
          unit: '小时',
        },
        {
          key: '待巡检',
          value: '30',
          unit: '次',
        },
      ],
    },
    {
      title: '运行统计',
      icon: work,
      content: [
        {
          key: '挤出机运行时长',
          value: '432',
          unit: '次',
        },
        {
          key: '挤出机吨能耗',
          value: '145265',
          unit: 'KWh/t',
        },
        {
          key: '挤出机总耗',
          value: '170671.9',
          unit: 'KWh/t',
        },
        {
          key: '牵引机运行时长',
          value: '1513',
          unit: 'h',
        },
        {
          key: '螺杆运行时长',
          value: '1513',
          unit: 'h',
        },
        {
          key: '真空定型机运行时长',
          value: '1322',
          unit: 'h',
        },
        {
          key: '切割机运行次数',
          value: '6211',
          unit: '次',
        },
      ],
    },
    {
      title: '异常统计',
      icon: warning,
      type: 'warning',
      content: [
        {
          key: '切割机',
          value: '2',
          unit: '次',
        },
        {
          key: '挤出成型机',
          value: '1',
          unit: '次',
        },
        {
          key: '牵引机',
          value: '2',
          unit: '次',
        },
        {
          key: '喷码机',
          value: '0',
          unit: '次',
        },
      ],
    },
  ]

  const deviceData = [
    {
      title: '挤出成型机',
      icon: 'icon-filters-plan',
      content: [
        {
          key: '当前产量',
          value: '490.5kg/h',
        },
        {
          key: '熔体压力',
          value: '5.1MPa',
        },
        {
          key: '熔体温度',
          value: '171°C',
        },
        {
          key: '主机转速',
          value: '40.0rpm',
        },
        {
          key: '喂料转速',
          value: '70.0rpm',
        },
      ],
    },

    {
      title: '牵引机',
      icon: 'icon-a-machine',
      content: [
        {
          key: '牵引速度',
          value: '2.555m/min',
        },
        {
          key: '当前长度',
          value: '8907',
        },
        {
          key: '当前点数',
          value: '2',
        },
      ],
    },
    {
      title: '切割机',
      icon: 'icon-jiguangqiegeji',
      content: [
        {
          key: '当前速度',
          value: '0.76m/min',
        },
        {
          key: '管子米重',
          value: '8.46Kg/m',
        },
        {
          key: '当前产量',
          value: '385.8Kg/h',
        },
        {
          key: '翻料长度',
          value: '1.1mm',
        },
        {
          key: '切割数量',
          value: '543',
        },
      ],
    },
    {
      title: '喷码机',
      icon: 'icon-a-bs-icofont2020',
      content: [
        {
          key: '当前文件',
          value: 'pvc5c',
        },
        {
          key: '激光器类型',
          value: 'Fiber',
        },
        {
          key: '激光功率',
          value: '100%',
        },
        {
          key: '激光器频率',
          value: '20KHz',
        },
        {
          key: '当前打标数',
          value: '491',
        },
        {
          key: '总打标数',
          value: '28825',
        },
        {
          key: '线数',
          value: '2.47m/min',
        },
      ],
    },
  ]

  return (
    <div className="device">
      <div className="device-left">
        <div className="title">设备信息</div>
        <div className="device-content">
          {deviceData.map((item, index) => {
            return (
              <div className="device-item font-size-20 mb-8" key={index}>
                <div className="img-wrap">
                  <div className="device-img">
                    <i className={'iconfont ' + item.icon}></i>
                  </div>
                  <div className="item-title primary-color">{item.title}</div>
                </div>
                <div>
                  {item.content.map((itemC, indexC) => {
                    return (
                      <div
                        style={{ display: 'flex' }}
                        className="mb-8"
                        key={indexC}
                      >
                        <span className="mr-60">{itemC.key}:</span>
                        <span className="primary-color">{itemC.value}</span>
                      </div>
                    )
                  })}
                </div>
              </div>
            )
          })}
        </div>
      </div>
      <div className="device-center">
        <CenterOne showText={showText}></CenterOne>
        <CenterTwo></CenterTwo>
      </div>
      <div className="device-right">
        <div className="title">数据统计</div>
        <div className="statistic-content">
          {statisticData.map((item, index) => {
            return (
              <div className="list-wrap mb-8" key={index}>
                <div
                  className="primary-color"
                  style={{ color: item.type == 'warning' ? '#ce3e09' : '' }}
                >
                  {item.title}
                </div>
                <div className="statistic-data">
                  <div className="primary-color">
                    <img src={item.icon} />
                  </div>
                  <div className="data-list-wrap ">
                    {item.content.map((itemC, indexC) => {
                      return (
                        <div key={indexC} className="data-item-wrap mb-20 ">
                          <span className="mr-20" style={{ flex: 1 }}>
                            {itemC.key}:
                          </span>
                          <div
                            className="primary-color"
                            style={{
                              color: item.type == 'warning' ? '#ce3e09' : '',
                            }}
                          >
                            <span className="mr-20">{itemC.value}</span>
                            <span>{itemC.unit}</span>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}
